<template>
  <div class="home " v-if="category">
    <nav-bar 
    ></nav-bar>
    <div class="home-bg "></div>
    <div class="categorytab" >
      <van-tabs v-model="active" swipeable sticky animated >
        
        <van-tab v-for="(item,index) in category" :key="index" :title="item.name" >
    
          <van-list
            v-model="item.loading"
            :immediate-check="false"
            :finished="item.finished"
            finished-text="已经到底了，去上传更多视频吧！"
            @load="onLoad"
          >
            <div class="detailparent">
              <cover
                class="detailitem"
                :detailitem="categoryitem"
                v-for="(categoryitem,categoryindex) in item.list"
                :key="categoryindex"
              />
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/Navbar.vue";
import cover from "@/components/common/cover";

export default {
  data() {
    return {
      category: [],
      active: 0 ,
    };
  },
  components: {
    NavBar,
    cover
  },

  methods: {
    async selectCategory() {
    
      const {data:res} = await this.$http.get("/tags")
 
      this.category = this.changeCategory(res.data);
      this.getsByTags();
    },

    // 扩展数据
    changeCategory(data) {    
      const category1 = data.map((item, index) => {
        item.list = [];
        item.page = 0;
        item.finished = false;
        item.loading = true;
        item.pagesize = 12;
        return item;
      });
      return category1;
    },
    
    // 获取视频
    async getsByTags() {
      const categoryitem = this.categoryItem();
      
      const {data:res} = await this.$http.post("/videos/t" , {
          tid:categoryitem.id,
          page: categoryitem.page,
          size: categoryitem.pagesize
        
      });
      categoryitem.list.push(...res.data);
      categoryitem.loading = false;
      if (res.data.length < categoryitem.pagesize) {
        categoryitem.finished = true;
      }
    },

    // 加载
    onLoad() {
      const categoryitem = this.categoryItem();
      setTimeout(() => {
        categoryitem.page += 1;
        this.getsByTags();
      }, 1000);
    },

    // 得到对应下标的 item
    categoryItem() {
      const categoryitem = this.category[this.active];
      return categoryitem;
    }
  },
  watch: {
    active() {
      const categoryitem = this.categoryItem();
      if (!categoryitem.list.length) {
        this.getsByTags();
      }
    }
  },
  created() {
    this.selectCategory();

  } 
};
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  background-color: white;
  overflow: hidden;
}
.home-bg {
  height: 10vw;
  background:url('/src/static/imgs/homeBg.webp') no-repeat center center ;
}
.detailparent {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  height: 65vh;
  overflow: scroll;

  margin-left: 10vw;
  .detailitem {
    margin: 1vw 0;
    height: 13vw ;
    width: 16vw ;
  margin-right: 1vw;
  }
}


</style>